import React from 'react';
import { View, Text, TouchableOpacity, Modal, StyleSheet, ScrollView, Dimensions, Image } from 'react-native';
import { AppStyles, AppColors, TextStyles } from '../theme/uiLib.config';
import Icon from 'react-native-vector-icons/Ionicons';
import mockMerchants from '../data/mockMerchants';
import { ImageSourcePropType } from 'react-native';
import { useRouter } from 'expo-router';

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

interface Merchant {
  id: string;
  name: string;
  ratio: string;
  description: string;
  image: ImageSourcePropType;
  location?: string;
}

interface RecommendedMerchantsModalProps {
  isVisible: boolean;
  onClose: () => void;
}

const RecommendedMerchantsModal: React.FC<RecommendedMerchantsModalProps> = ({ isVisible, onClose }) => {
  const router = useRouter();

  // 使用 mockMerchants 数据
  const recommendedMerchants = mockMerchants.map(merchant => ({
    id: merchant.id,
    name: merchant.name,
    ratio: merchant.ratio,
    description: merchant.description,
    image: merchant.image,
    location: merchant.location,
  }));

  const truncateDescription = (description: string) => {
    if (description.length > 30) {
      return description.substring(0, 30) + '...';
    }
    return description;
  };

  return (
    <Modal
      transparent={true}
      animationType="fade"
      visible={isVisible}
    >
      <View style={styles.modalOverlay}>
        <View style={styles.modalContent}>
          <View style={styles.header}>
            <Text style={[TextStyles.h3, { flex: 1, textAlign: 'center' }]}>推荐商户</Text>
            <TouchableOpacity
              onPress={onClose}
              style={styles.closeButton}
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
            >
              <Icon name="close-circle-outline" size={28} color={AppColors.grey20} />
            </TouchableOpacity>
          </View>
          <View style={styles.divider} />
          
          <ScrollView style={styles.merchantList}>
            {recommendedMerchants.map((merchant, index) => (
              <TouchableOpacity
                key={index}
                style={styles.merchantItem}
                activeOpacity={0.7}
                onPress={() => {
                  onClose();
                  router.push(`/MerchantDetail?id=${merchant.id}`);
                }}
              >
                <Image source={merchant.image} style={styles.merchantImage} />
                <View style={styles.merchantInfo}>
                  <Text style={styles.merchantName}>{merchant.name}</Text>
                  <Text style={styles.merchantRatio}>兑换比例 {merchant.ratio}</Text>
                  <Text style={styles.merchantDescription}>{truncateDescription(merchant.description)}</Text>
                  {merchant.location && (
                    <View style={styles.locationContainer}>
                      <Icon name="location-sharp" size={12} color={AppColors.secondary} />
                      <Text style={styles.locationText}>{merchant.location}</Text>
                    </View>
                  )}
                  <View style={styles.buttonContainer}>
                    <TouchableOpacity style={styles.bindButton}>
                      <Text style={styles.bindButtonText}>加入会员</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </TouchableOpacity>
            ))}
          </ScrollView>

          <TouchableOpacity
            style={styles.confirmButton}
            onPress={onClose}
            activeOpacity={0.8}
          >
            <Text style={styles.confirmButtonText}>确定</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 12,
    borderRadius: 16,
    width: screenWidth * 0.95,
    height: screenHeight * 0.85,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 10,
    marginBottom: 20,
  },
  closeButton: {
    position: 'absolute',
    right: 0,
  },
  divider: {
    borderBottomWidth: 1,
    borderBottomColor: AppColors.grey10,
    width: '100%',
    marginBottom: 8,
  },
  merchantList: {
    flex: 1,
  },
  merchantItem: {
    flexDirection: 'row',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: AppColors.grey10,
    alignItems: 'flex-start',
  },
  merchantImage: {
    width: 120,
    height: 120,
    borderRadius: 8,
  },
  merchantInfo: {
    flex: 1,
    marginLeft: 12,
  },
  merchantName: {
    ...TextStyles.primary,
    marginBottom: 4,
  },
  merchantRatio: {
    ...TextStyles.small,
    color: AppColors.golden,
    marginBottom: 4,
  },
  merchantDescription: {
    ...TextStyles.small,
    color: AppColors.secondary,
  },
  bindButton: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    backgroundColor: AppColors.blueplus,
    borderRadius: 16,
  },
  bindButtonText: {
    ...TextStyles.small,
    color: AppColors.golden,
  },
  confirmButton: {
    width: '100%',
    height: 44,
    borderRadius: 22,
    backgroundColor: AppColors.primary,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20,
  },
  confirmButtonText: {
    ...TextStyles.small,
    color: AppColors.white,
  },
  locationContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 4,
  },
  locationText: {
    ...TextStyles.smaller,
    color: AppColors.secondary,
    marginLeft: 4,
  },
  buttonContainer: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
    marginTop: 6,
  },
});

export default RecommendedMerchantsModal; 